<template>
<!--   <div>-->
<!--     <div class="mainapp">-->
<!--       <div class="app-container">-->
<!--         <div class="header">-->
<!--           <el-row :gutter="20">-->
<!--             <el-col :span="6">-->
<!--               <div class="card">-->
<!--                 <div class="titleLeft">-->
<!--                   <div>-->
<!--                     上报正常-->
<!--                   </div>-->
<!--                   <div class="num">-->
<!--                     {{uploadNormalCount}}-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 <div class="titleRight">-->
<!--                   <img src="../../../assets/images/zhengchang.png" alt="">-->
<!--                 </div>-->
<!--               </div>-->
<!--             </el-col>-->
<!--             <el-col :span="6">-->
<!--               <div class="card">-->
<!--                 <div class="titleLeft">-->
<!--                   <div>-->
<!--                     上报异常-->
<!--                   </div>-->
<!--                   <div class="num">-->
<!--                     {{uploadWarningCount}}-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 <div class="titleRight">-->
<!--                   <img src="../../../assets/images/yichang.png" alt="">-->
<!--                 </div>-->
<!--               </div>-->
<!--             </el-col>-->
<!--             <el-col :span="6">-->
<!--               <div class="card">-->
<!--                 <div class="titleLeft">-->
<!--                   <div>-->
<!--                     上报错误-->
<!--                   </div>-->
<!--                   <div class="num">-->
<!--                     {{uploadErrorCount}}-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 <div class="titleRight">-->
<!--                   <img src="../../../assets/images/error.png" alt="">-->
<!--                 </div>-->
<!--               </div>-->
<!--             </el-col>-->
<!--             <el-col :span="6">-->
<!--               <div class="card">-->
<!--                 <div class="titleLeft">-->
<!--                   <div>-->
<!--                     新增接口-->
<!--                   </div>-->
<!--                   <div class="num">-->
<!--                     {{themejiekou}}-->
<!--                   </div>-->
<!--                 </div>-->
<!--                 <div class="titleRight">-->
<!--                   <img src="../../../assets/images/jiekou.png" alt="">-->
<!--                 </div>-->
<!--               </div>-->
<!--             </el-col>-->
<!--           </el-row>-->
<!--         </div>-->
<!--         <div class="content">-->
<!--           <el-row :gutter="20">-->
<!--             <el-col :span="18">-->
<!--               <div class="contentLeft">-->
<!--                 <el-card :body-style="{ height: '660px' }">-->
<!--                   <div>-->
<!--                     <div class="defind">上报详情</div>-->
<!--                     <div class="line"></div>-->
<!--                   </div>-->
<!--                   <div>-->
<!--                     <el-table-->
<!--                       :data="list"-->
<!--                       height="504px"-->
<!--                       :row-style="{height:'46px'}"-->
<!--                       style="width: 100%;">-->
<!--                       <el-table-column-->
<!--                         prop="uploadTheme"-->
<!--                         label="上报主题"-->
<!--                         width="240">-->
<!--                       </el-table-column>-->
<!--                       <el-table-column-->
<!--                         prop="uploadStatus"-->
<!--                         label="状态"-->
<!--                         width="120">-->
<!--                         <template slot-scope="scope">-->
<!--                           <div class="normalColor" v-if="scope.row.uploadStatus == 0">正常</div>-->
<!--                           <div class="warningColor" v-else-if="scope.row.uploadStatus == 1">异常</div>-->
<!--                           <div class="errorColor" v-else>错误</div>-->
<!--                         </template>-->
<!--                       </el-table-column>-->
<!--                       <el-table-column-->
<!--                         prop="fileName"-->
<!--                         label="上报文件">-->
<!--                         <template slot-scope="scope">-->
<!--                           <a @click="download(scope)" style="color: #2849f7;text-decoration:underline">{{scope.row.fileName}}</a>-->
<!--                         </template>-->
<!--                       </el-table-column>-->
<!--                       <el-table-column-->
<!--                         prop="uploadTime"-->
<!--                         width="200"-->
<!--                         label="时间">-->
<!--                       </el-table-column>-->
<!--                     </el-table>-->
<!--                   </div>-->
<!--                   <div style="margin: 10px auto 0">-->
<!--                     <pagination-->
<!--                       v-show="total > 0"-->
<!--                       :total="total"-->
<!--                       :page.sync="queryParams.page"-->
<!--                       :limit.sync="queryParams.pageSize"-->
<!--                       @pagination="getList"-->
<!--                     />-->
<!--                   </div>-->
<!--                 </el-card>-->
<!--               </div>-->
<!--             </el-col>-->
<!--             <el-col :span="6">-->
<!--               <div class="contentRight">-->
<!--                 <el-card :body-style="{ height: '660px' }">-->
<!--                   <ColumnDiagramPackaging-->
<!--                     :id="'pie'"-->
<!--                     :data="pieList"-->
<!--                     :style="{ width: '100%', height: '100%' }"-->
<!--                   ></ColumnDiagramPackaging>-->
<!--                 </el-card>-->
<!--               </div>-->
<!--             </el-col>-->
<!--           </el-row>-->

<!--         </div>-->
<!--       </div>-->
<!--     </div>-->
<!--   </div>-->
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row :gutter="20" class="JNPF-common-search-box">
         <el-col :span="6">
           <div class="card">
             <div class="titleLeft">
               <div>
                 上报正常
               </div>
               <div class="num">
                 {{uploadNormalCount}}
               </div>
             </div>
             <div class="titleRight">
               <img src="../../../assets/images/zhengchang.png" alt="">
             </div>
           </div>
         </el-col>
         <el-col :span="6">
           <div class="card">
             <div class="titleLeft">
               <div>
                 上报异常
               </div>
               <div class="num">
                 {{uploadWarningCount}}
               </div>
             </div>
             <div class="titleRight">
               <img src="../../../assets/images/yichang.png" alt="">
             </div>
           </div>
         </el-col>
         <el-col :span="6">
           <div class="card">
             <div class="titleLeft">
               <div>
                 上报错误
               </div>
               <div class="num">
                 {{uploadErrorCount}}
               </div>
             </div>
             <div class="titleRight">
               <img src="../../../assets/images/error.png" alt="">
             </div>
           </div>
         </el-col>
         <el-col :span="6">
           <div class="card">
             <div class="titleLeft">
               <div>
                 新增接口
               </div>
               <div class="num">
                 {{themejiekou}}
               </div>
             </div>
             <div class="titleRight">
               <img src="../../../assets/images/jiekou.png" alt="">
             </div>
           </div>
         </el-col>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="tableContainer">
          <el-table
            :data="list"
            height="100%"
            :row-style="{height:'46px'}"
            style="width: 100%;">
            <el-table-column
              prop="uploadTheme"
              label="上报主题"
              width="240">
            </el-table-column>
            <el-table-column
              prop="uploadStatus"
              label="状态"
              width="120">
              <template slot-scope="scope">
                <div class="normalColor" v-if="scope.row.uploadStatus == 0">正常</div>
                <div class="warningColor" v-else-if="scope.row.uploadStatus == 1">异常</div>
                <div class="errorColor" v-else>错误</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fileName"
              label="上报文件">
              <template slot-scope="scope">
                <a @click="download(scope)" style="color: #2849f7;text-decoration:underline">{{scope.row.fileName}}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="uploadTime"
              width="200"
              label="时间">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            :page-sizes="[10, 20, 30, 40]"
            class="pagination-container"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import ColumnDiagramPackaging from "../../../components/Wuxianju/ColumnDiagramPackaging";
    import {getHomeTable,getHomeList,zipDownload} from "@/api/escalation";
    export default {
        name: "index",
        components:{
            ColumnDiagramPackaging
        },
        data(){
            return{
                total:0,
                queryParams:{
                    page:1,
                    pageSize:10,
                },
                uploadErrorCount:'',
                uploadNormalCount:'',
                uploadWarningCount:'',
                themejiekou:'',
                list:[],
                themeData:[],
                pieList:{},
            }
        },
        methods:{
            getList() {
                getHomeTable(this.queryParams).then((response) => {
                    this.list = response.data;
                    this.total = response.total;
                });
                getHomeList().then((res=>{
                    this.uploadErrorCount=res.uploadErrorCount;
                    this.uploadNormalCount=res.uploadNormalCount;
                    this.uploadWarningCount=res.uploadWarningCount;
                    this.themejiekou= res.themeList.length;
                    this.themeData = res.themeData;
                    this.pieList={
                        title: {
                            text: '上报总览',
                                textStyle: {
                                 color: '#235894',fontSize:20,fontWeight: 900
                            }
                        },
                        color: [
                            "#FD6D54",
                            "#FEC640",
                            "#3FE48D",
                            "#7D7AFC",
                            "#28ACFF",
                        ],
                        legend: {
                                orient: 'vertical',
                                icon:'circle',
                                bottom: 20,
                                itemGap: 10,
                                itemWidth: 30,
                                left: "center",
                                textStyle:{
                                fontSize:16
                            },
                            formatter: function(name,value) {
                                var _this = this;
                                var index = 0;
                                var data =  res.themeData;
                                var total = 0;
                                var tarValue;
                                // var clientlabels = ['战发部','党建部','财务部'];
                                // var clientcounts = [25,8,4];
                                data.forEach(function(item,i){
                                    total+=item.value;
                                    if(item.name == name){
                                        tarValue = item.value;
                                    }
                                });
                                var p = Math.round(((tarValue/total)*100))+'%';
                                return `${name}  ${tarValue}  ${p}`
                            },
                        },
                        series: [
                            {
                                radius: ["60%", "80%"],
                                top:10,
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: "#fff",
                                    borderWidth: 2,
                                },
                                center: ['50%', '35%'],
                                label: {
                                    show: false,
                                    position: "center",
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: "14",
                                        fontWeight: "bold",
                                        formatter:function (params) {
                                            let titlle = params.name;
                                           if(titlle.length<=5){
                                               return params.percent+'%\n'+titlle;
                                           }else if(titlle.length>5 && titlle.length<=12){
                                               titlle = `${titlle.slice(0,5)}\n${titlle.slice(5)}`
                                               return params.percent+'%\n'+titlle;
                                           }else {
                                               titlle = `${titlle.slice(0,8)}\n${titlle.slice(8,16)}`
                                               return params.percent+'%\n'+titlle;
                                           }
                                        }
                                    },
                                },
                                labelLine: {
                                    show: false,
                                },
                                data: res.themeData,
                                type: "pie",
                            },
                        ],
                    };
                        // [
                        // {value: 10,name: "战发部"},
                        //     {value: 5, name: "党建部"},
                        //     {value:6, name:"财务部"}
                        // ]
                }))
            },
            download({row}){
                 console.log(row,'=====');
                zipDownload({id:row.id}).then(res=>{
                    let blob =new Blob([res],{type:'application/zip'})
                    let aLink = document.createElement("a")
                    aLink.download=row.fileName;
                    aLink.href=window.URL.createObjectURL(blob)
                    aLink.click();
                })
            }
        },
        created(){
            this.getList();
        },
        mounted() {

        },
    }
</script>

<style scoped lang="scss">
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 84px);
    background: #f7f9fb;
    .JNPF-common-layout-center {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 20px;

      .JNPF-common-search-box {
        /*background: #fff;*/
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 16px;
        /*padding: 15px 21px 0;*/
        border-radius: 4px;
      }
      .JNPF-flex-main{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 4px;
      }
      .JNPF-common-layout-main {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow: hidden;
      }
      .JNPF-flex-main .el-table {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
  }
  .tableContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    height: 100%;
    overflow: hidden;
    padding:24px 21px 2px;
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 10px;
    }
    .card{
      display: flex;
      /*flex-direction: column;*/
      justify-content: space-between;
      /*align-items: center;*/
      height:130px;
      border-radius: 5px;
      line-height: 40px;
      /*letter-spacing: 5px;*/
      border: 1px solid #E6EBF5;
      background: #FFFFFF;
      /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
      font-size:16px;
      padding:25px 41px 25px 49px;
      color: #606266;
      .num{
        font-size:36px;
        letter-spacing:1px;
        font-weight: bolder;
      }
      /*font-size: 28px;*/


    }
  .content{
    margin-top: 30px;
    .contentLeft{
      .line{
        border-bottom:1px solid  #dfe6ec;
        margin-top: 10px;
      }
      /*::v-deep .el-card__body{*/
      /*  padding: 15px 20px 20px 20px;*/
      /*}*/
    }
    .contentRight{
    }
  }
  .defind{
    color: #235894;
    font-weight: 900;
    font-size: 20px;
  }
  .normalColor{
    width:50px;
    height: 28px;
    background: rgba(63,228,141,0.1);
    border: 1px solid #3FE48D;
    border-radius: 4px;color:#3FE48D;text-align: center;line-height: 28px
  }
  .errorColor{
    width:50px;
    height: 28px;
    background: rgba(253,109,84,0.1);
    border: 1px solid #FD6D54;
    border-radius: 4px;
    color:#FD6D54;
    text-align: center;
    line-height: 28px
  }
  .warningColor{
    width:50px;
    height: 28px;
    background: rgba(254,198,64,0.1);
    border: 1px solid #FEC640;
    border-radius: 4px;
    color:#FEC640;
    text-align: center;
    line-height: 28px
  }
</style>
